<template>
	<view style="background: #F1F1F5;">
		<view v-if="content.userIdentityStatus==0" class="card1">
			<view class="top" @click="jump(1)">
				<view class="left">
					<view class="row1">
						<text style="font-size: 24rpx;

font-weight: bold;
color: #5D5653;">试用零工</text>
						<view class="triangle">
						</view>
					</view>
					<view class="row2">
						<image v-if="bannerList[0].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/shil2.png" mode=""></image>
						<image v-if="bannerList[1].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/shil3.png" mode=""></image>
						<image v-if="bannerList[2].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/shil1.png" mode=""></image>
						<image v-if="!bannerList[0].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/shi2.png" mode=""></image>
						<image v-if="!bannerList[1].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/shi3.png" mode=""></image>
						<image v-if="!bannerList[2].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/shi1.png" mode=""></image>
					</view>
				</view>
				<view class="right">
					<image src="https://images.linglinggong.net/static/newMy/staff-my5.png" mode=""></image>
				</view>
			</view>
			<view class="progress1">
				<view class="progressActive"
					:style="{width:`${33*(bannerList.filter((item)=>item.isOk==true).length)}%`}">
				</view>
				<view class="progressActiveLine">
				</view>
			</view>
			<view class="bottom" @click="jump(2)">
				<text>权益对比</text>
				<image src="https://images.linglinggong.net/static/newMy/staff-my4.png" mode=""></image>
			</view>
		</view>
		<view v-if="content.userIdentityStatus==1" class="card2">
			<view class="top" @click="jump(1)">
				<view class="left">
					<view class="row1">
						<text>正式零工</text>
						<view class="triangle">
						</view>
					</view>
					<view class="row2">
						<image v-if="bannerList[0].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/study1.png" mode=""></image>
						<image v-if="bannerList[1].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/stup2_2.png" mode=""></image>
						<image v-if="bannerList[2].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/stup1_1.png" mode=""></image>
						<image v-if="!bannerList[0].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/stup33.png" mode=""></image>
						<image v-if="!bannerList[1].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/stup1_2.png" mode=""></image>
						<image v-if="!bannerList[2].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/stup22.png" mode=""></image>
					</view>
				</view>
				<view class="right">
					<image src="https://images.linglinggong.net/static/newMy/staff-my22.png" mode=""></image>
				</view>
			</view>
			<view class="progress1">
				<view class="progressActive"
					:style="{width:`${33*(bannerList.filter((item)=>item.isOk==true).length)}%`}">
				</view>
				<view class="progressActiveLine">
				</view>
			</view>
			<view class="bottom" @click="jump(2)">
				<text>权益对比</text>
				<image src="https://images.linglinggong.net/static/newMy/staff-my4.png" mode=""></image>
			</view>
		</view>
		<view v-if="content.userIdentityStatus==2&&content.userIdentity==2" class="card3">
			<view class="top" @click="jump(1)">
				<view class="left">
					<view class="row1">
						<text>
							{{`金牌零工- 晋升期剩 ${dataTime} 天`}}</text>
						<view class="triangle">
						</view>
					</view>
					<view class="row2">
						<image v-if="bannerList[0].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/vip1_1.png" mode=""></image>
						<image v-if="bannerList[2].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/vip4_4.png" mode=""></image>
						<image v-if="bannerList[3].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/vip2_2.png" mode=""></image>
						<image v-if="bannerList[1].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/vip3_3.png" mode=""></image>
						<image v-if="!bannerList[0].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/vip1.png" mode=""></image>
						<image v-if="!bannerList[2].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/vip4.png" mode=""></image>
						<image v-if="!bannerList[3].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/vip2.png" mode=""></image>
						<image v-if="!bannerList[1].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/vip3.png" mode=""></image>
					</view>
				</view>
				<view class="right">
					<image src="https://images.linglinggong.net/static/newMy/staff-my21.png" mode=""></image>
				</view>
			</view>
			<view class="progress1">
				<view class="progressActive"
					:style="{width:`${25*(bannerList.filter((item)=>item.isOk==true).length)}%`}">
				</view>
				<view class="progressActiveLine">
				</view>
			</view>
			<view class="bottom" @click="jump(2)">
				<text>权益对比</text>
				<image src="https://images.linglinggong.net/static/newMy/staff-my23.png" mode=""></image>
			</view>
		</view>
		<view v-if="content.userIdentityStatus==2&&content.userIdentity ==3" class="card3">
			<view class="top" @click="jump(1)">
				<view class="left">
					<view class="row1">
						<text>
							{{`金牌零工- 保留期剩 ${dataTime} 天`}}</text>
						<view class="triangle">
						</view>
					</view>
					<view class="row2">
						<image v-if="bannerList[0].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/vip1_1.png" mode=""></image>
						<image v-if="bannerList[1].isOk" src="https://images.linglinggong.net/static/icon3/grow/qi2.png"
							mode=""></image>
						<image v-if="!bannerList[0].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/vip1.png" mode=""></image>
						<image v-if="!bannerList[1].isOk"
							src="https://images.linglinggong.net/static/icon3/grow/qi1.png" mode=""></image>
					</view>
				</view>
				<view class="right">
					<image src="https://images.linglinggong.net/static/newMy/staff-my21.png" mode=""></image>
				</view>
			</view>
			<view class="progress1">
				<view class="progressActive"
					:style="{width:`${25*(bannerList.filter((item)=>item.isOk==true).length)}%`}">
				</view>
				<view class="progressActiveLine">
				</view>
			</view>
			<view class="bottom" @click="jump(2)">
				<text>权益对比</text>
				<image src="https://images.linglinggong.net/static/newMy/staff-my23.png" mode=""></image>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "newStaffMyCard",
		props: {
			content: {
				type: Object,
				default () {
					return {}
				}
			},
			dataTime: {
				type: Number,
				default: 0
			},
			bannerList: {
				type: Array,
				default () {
					return []
				},
			},
		},
		data() {
			return {};
		},
		methods: {
			jump(val) {
				if (val == 1) {
					uni.navigateTo({
						url: '/pages/grow/grow'
					})
				} else if (val == 2) {
					uni.navigateTo({
						url: '/pages/grow/equity'
					})
				}
			}
		},
		mounted() {}
	}
</script>
<style lang="less" scoped>
	.card1 {
		margin: auto;
		width: 584rpx;
		padding: 14rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		background: linear-gradient(#E8E8E8, #B6B6B6, #909090);
		height: 216rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				.row1 {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.triangle {
						width: 0;
						height: 0;
						margin-left: 6rpx;
						border-top: 8rpx solid transparent;
						border-bottom: 8rpx solid transparent;
						border-left: 12rpx solid #53545D;
						border-right: 8rpx solid transparent;
						border-radius: 4rpx;
					}
				}

				.row2 {
					image {
						width: 40rpx;
						height: 46rpx;
						margin-right: 10rpx;
					}
				}
			}

			.right {
				width: 124rpx;
				height: 124rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.progress1 {
			width: 100%;
			height: 4rpx;
			background: rgba(241, 241, 245, 0.2);
			// box-shadow: -1rpx -1rpx 0rpx 0rpx #FFFFFF, 1rpx 1rpx 0rpx 0rpx rgba(90, 88, 88, 0.6);
			display: flex;
			border-radius: 2rpx;

			.progressActive {
				height: 8rpx;
				background: #53545D;
				box-shadow: 0rpx 1rpx 2rpx 0rpx rgba(16, 17, 26, 0.59);
				align-self: center;
				overflow: hidden;
				border-radius: 4rpx 0rpx 0rpx 4rpx;
			}

			.progressActiveLine {
				width: 8rpx;
				height: 11rpx;
				border-radius: 50%;
				align-self: center;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 10rpx 4rpx #fff;
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #53545D;
			font-size: 24rpx;
			margin-top: 20rpx;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.card2 {
		margin: auto;
		width: 584rpx;
		padding: 14rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		background: linear-gradient(#FFE7CC, #FFDFBC, #FFD0A7);
		height: 216rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		color: #53545D;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				.row1 {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.triangle {
						width: 0;
						height: 0;
						margin-left: 6rpx;
						border-top: 8rpx solid transparent;
						border-bottom: 8rpx solid transparent;
						border-left: 12rpx solid #53545D;
						border-right: 8rpx solid transparent;
						border-radius: 4rpx;
					}
				}

				.row2 {
					image {
						width: 40rpx;
						height: 46rpx;
						margin-right: 10rpx;
					}
				}
			}

			.right {
				width: 124rpx;
				height: 124rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.progress1 {
			width: 100%;
			height: 4rpx;
			background: rgba(241, 241, 245, 0.2);
			// box-shadow: -1rpx -1rpx 0rpx 0rpx #FFFFFF, 1rpx 1rpx 0rpx 0rpx rgba(90, 88, 88, 0.6);
			display: flex;
			border-radius: 2rpx;

			.progressActive {
				height: 8rpx;
				background: #FFCC2E;
				box-shadow: 0rpx 1rpx 2rpx 0rpx rgba(16, 17, 26, 0.59);
				align-self: center;
				overflow: hidden;
				border-radius: 4rpx 0rpx 0rpx 4rpx;
			}

			.progressActiveLine {
				width: 8rpx;
				height: 11rpx;
				border-radius: 50%;
				align-self: center;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 10rpx 4rpx #fff;
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			margin-top: 20rpx;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.card3 {
		margin: auto;
		width: 584rpx;
		padding: 14rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		color: #FFFFFF;
		background: linear-gradient(#00B554, #00B679, #00B683);
		height: 216rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				.row1 {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.triangle {
						width: 0;
						height: 0;
						margin-left: 6rpx;
						border-top: 8rpx solid transparent;
						border-bottom: 8rpx solid transparent;
						border-left: 12rpx solid #FFFFFF;
						border-right: 8rpx solid transparent;
						border-radius: 4rpx;
					}
				}

				.row2 {
					image {
						width: 40rpx;
						height: 46rpx;
						margin-right: 10rpx;
					}
				}
			}

			.right {
				width: 124rpx;
				height: 124rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.progress1 {
			width: 100%;
			height: 4rpx;
			background: #008E59;
			// box-shadow: -1rpx -1rpx 0rpx 0rpx #FFFFFF, 1rpx 1rpx 0rpx 0rpx rgba(90, 88, 88, 0.6);
			display: flex;
			border-radius: 2rpx;

			.progressActive {
				height: 8rpx;
				background: #FFFFF4;
				box-shadow: 0rpx 1rpx 2rpx 0rpx rgba(16, 17, 26, 0.59);
				align-self: center;
				overflow: hidden;
				border-radius: 4rpx 0rpx 0rpx 4rpx;
			}

			.progressActiveLine {
				width: 8rpx;
				height: 11rpx;
				border-radius: 50%;
				align-self: center;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 10rpx 4rpx #fff;
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			margin-top: 20rpx;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
</style>